.main {
  position: relative;
  width: 100%;
  padding: 6px 12px 30px;
  background-color: #fff;
}
.main::after {
  position: absolute;
  display: block;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 25px;
  background-image: linear-gradient(0deg, #f4f4f4, #fff);
  content: '';
}
.main .list_nav {
  position: absolute;
  display: flex;
  transform: translate(-50%, 0);
  left: 50%;
  bottom: 0;
  height: 25px;
  width: 30px;
  z-index: 1;
}
.main .list_nav span,
.main .list_nav i {
  height: 4px;
  border-radius: 2px;
}
.main .list_nav span {
  width: 14px;
  background-color: #0086f6;
}
.main .list_nav i {
  width: 4px;
  margin-left: 4px;
  background-color: #cccccc;
}
.main .main_nav {
  overflow: hidden;
  display: flex;
  width: 100%;
  height: 184px;
  margin: 0 auto;
  border-radius: 10px;
}
.main .main_nav ul {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.main .main_nav ul:nth-child(-n+4) {
  margin-right: 1px;
}
.main .main_nav ul li {
  flex: 1;
  margin-top: 1px;
}
.main .main_nav ul li:first-child {
  margin-top: 0;
}
.main .main_nav ul li:first-child a {
  color: #fff;
}
.main .main_nav ul li a {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  font-size: 12px;
}
.main .main_nav ul li a span {
  width: 28px;
  height: 28px;
  background: url(../images/nav.png) no-repeat;
  background-position-x: 0;
  background-size: cover;
}
.main .main_nav ul:nth-child(1) li {
  background-color: #fff5f1;
}
.main .main_nav ul:nth-child(1) li:first-child {
  background: linear-gradient(#fa5a56, #fb8550);
}
.main .main_nav ul:nth-child(1) li:first-child a span {
  background-position-y: -84px;
}
.main .main_nav ul:nth-child(1) li:nth-child(2) a span {
  background-position-y: -336px;
}
.main .main_nav ul:nth-child(1) li:nth-child(3) a span {
  background-position-y: 0px;
}
.main .main_nav ul:nth-child(2) li {
  background-color: #eff9ff;
}
.main .main_nav ul:nth-child(2) li:first-child {
  background: linear-gradient(#3c83fa, #50b2fa);
}
.main .main_nav ul:nth-child(2) li:first-child a span {
  background-position-y: -168px;
}
.main .main_nav ul:nth-child(2) li:nth-child(2) a span {
  background-position-y: -56px;
}
.main .main_nav ul:nth-child(2) li:nth-child(3) a span {
  background-position-y: -280px;
}
.main .main_nav ul:nth-child(3) li {
  background-color: #f2f5ff;
}
.main .main_nav ul:nth-child(3) li:first-child {
  background: linear-gradient(#5e80ff, #65a3ff);
}
.main .main_nav ul:nth-child(3) li:first-child a span {
  background-position-y: -364px;
}
.main .main_nav ul:nth-child(3) li:nth-child(2) a span {
  background-position-y: -224px;
}
.main .main_nav ul:nth-child(3) li:nth-child(3) a span {
  background-position-y: -252px;
}
.main .main_nav ul:nth-child(4) li {
  background-color: #ecfcf8;
}
.main .main_nav ul:nth-child(4) li:first-child {
  background: linear-gradient(#30c4b6, #51d8b3);
}
.main .main_nav ul:nth-child(4) li:first-child a span {
  background-position-y: -140px;
}
.main .main_nav ul:nth-child(4) li:nth-child(2) a span {
  background-position-y: -196px;
}
.main .main_nav ul:nth-child(4) li:nth-child(3) a span {
  background-position-y: -392px;
}
.main .main_nav ul:nth-child(5) li {
  background-color: #fff9f2;
}
.main .main_nav ul:nth-child(5) li:first-child {
  background: linear-gradient(#ff8939, #ffa745);
}
.main .main_nav ul:nth-child(5) li:first-child a span {
  background-position-y: -28px;
}
.main .main_nav ul:nth-child(5) li:nth-child(2) a span {
  background-position-y: -112px;
}
.main .main_nav ul:nth-child(5) li:nth-child(3) a span {
  background-position-y: -308px;
}
